<template>
    <el-table :data="filterUserList.slice((currentPage - 1) * pageSize, currentPage * pageSize)" style="width: 100%">
        <el-table-column prop="id" label="编号" />
        <el-table-column prop="name" label="户主"  />
        <el-table-column prop="title" label="楼盘名称"/>
        <el-table-column prop="type" label="房源类型" />
        <el-table-column prop="num" label="门牌号" />
        <el-table-column prop="hometype" label="房源户型" />
        <!-- 搜索框 -->
        <el-table-column align="right" v-if="props.isType === 'show'">
            <template #header>
                <el-input v-model="search" size="small" placeholder="搜索户主" />
            </template>
        </el-table-column>
        <!-- 添加删除按钮，更新用户页面使用 -->
        <el-table-column label="操作" v-if="props.isType != 'show'">
            <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
                <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination v-model:currentPage="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
        :small="small" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
        :total="filterUserList.length" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

    <UpdateTable @get-list="getUserList"></UpdateTable>
</template>

<script setup lang="ts">
import http from '@/api/api';
import { computed } from '@vue/reactivity';
import { ElMessage, ElMessageBox } from 'element-plus';
import { onMounted, ref } from 'vue';
import { useStore } from "vuex";
import UpdateTable from './UpdateDialog.vue'
const store = useStore()

interface User {
    id: number,
    title: string,
    type: string,
    num: string,
    hometype: string,
    name: string
}
//表格数据
const userList = ref([])

onMounted(() => {
    //获取用户信息
    getUserList()
})
//获取用户信息
const getUserList = () => {
    http('./userlist').then((res: any) => {
        console.log(res);
        if (res.data.length) {
            ElMessage({
                message: '信息获取成功',
                type: 'success'
            })
            userList.value = res.data
        } else {
            ElMessage({
                message: '信息获取失败！',
                type: 'error',
            })
        }
    })
}
//当前页数
const currentPage = ref(2)
//每页显示个数
const pageSize = ref(10)
//是否使用小型分页样式
const small = ref(true)
//是否禁用分页
const disabled = ref(false)
// 是否为分页按钮添加背景色
const background = ref(true)

//搜索输入框
const search = ref('')

//接收表格类型
const props = defineProps(['isType'])

//处理显示的数据
const filterUserList = computed(() => {
    return userList.value.filter((item: any) => item.name.toLowerCase().includes(search.value.toLowerCase()))
})
//显示个数变化
const handleSizeChange = (val: number) => {
    pageSize.value = val
}
//页码改变
const handleCurrentChange = (val: number) => {
    currentPage.value = val
}

const user = JSON.parse(localStorage.getItem('user'))

//编辑信息
const handleEdit = (row: any) => {
    //权限判断
    //用户信息修改
    if (user.power.length === 0) {
        ElMessage({
            type: 'warning',
            message: '没有权限！',
        })
        return
    }
    console.log(row)
    store.commit('changeDialog')
    store.commit('showEdit', row)
}

//删除信息
const handleDelete = (row: any) => {
    //权限判断
    if (!(user.power.includes('成员变更') || user.power.includes('所有权限'))) {
        ElMessage({
            type: 'warning',
            message: '没有权限！',
        })
        return
    }
    if (user.username === row.username) {
        ElMessage({
            type: 'error',
            message: '不能删除自己！',
        })
        return
    }
    ElMessageBox.confirm(
        '确认删除该信息吗?',
        'Warning',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            http(`/userlist/${row.id}`, 'delete').then(res => {
                if (res.status === 200) {
                    ElMessage({
                        type: 'success',
                        message: '删除成功！',
                    })
                    getUserList()
                } else {
                    ElMessage({
                        type: 'error',
                        message: '删除失败！',
                    })
                }
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消！',
            })
        })
}
</script>

<style >
/* .el-pagination{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20PX;
}
div.el-overlay.is-message-box{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 1);
    width: 300px;
    height: 150px;
    color: black;
    border: 1px solid #ccc;
    
}
div.el-message-box__header{
    width: 150px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
div.el-message-box__container{
    width: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 20px;
} */
</style>